<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-color: #ccc;
    }

    #app {
        width: 400px;
        margin: 20px auto;
        background-color: #fff;
        border: 4px solid blueviolet;
        border-radius: 1em;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
        padding: 1em 2em 2em;
    }

    h3 {
        text-align: center;
    }

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #ccc;
        padding: 0 1em;
    }

    .title h4 {
        line-height: 2;
        margin: 0;
    }

    .container {
        border: 1px solid #ccc;
        padding: 0 1em;
    }

    .btn {
        /* 鼠标改成手的形状 */
        cursor: pointer;
    }
</style>

<body>
    <div id="app">
        <h3>案例：折叠面板</h3>
        <my-pannel v-for="item in list" :title="item.title" :content="item.content"></my-pannel>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
        Vue.component('MyPannel', {
            props: ['title', 'content'],
            template: `
            <div style="margin-bottom:20px;">
            <div class="title">
              <h4>{{title}}</h4>
              <span class="btn"
              v-on:click="isVisiable= !isVisiable">
              {{isVisiable ? '收起' : '展开'}}
              </span>
            </div>
            <div class="container" v-show="isVisiable">
           {{content}}
            </div>
          </div>
            `,
            data() {
                return { isVisiable: true }
            }
        })
        new Vue({
            el: '#app',
            data: {
                list: [
                    {
                        id: 1,
                        title: '洛阳陌',
                        author: '李白',
                        content: '白玉谁家郎,回车渡天津。看花东陌上，惊动洛阳人。'
                    },
                    {
                        id: 2,
                        title: '静夜思',
                        author: '李白',
                        content: '床前明月光,疑是地上霜,举头望明月,低头思故乡。'
                    },
                    {
                        id: 3,
                        title: '赠汪伦',
                        author: '李白',
                        content: '李白乘舟将欲行，忽闻岸上踏歌声。花潭水深千尺，不及汪伦送我情。'
                    }
                ]
            }
        })
    </script>
</body>

</html>